import React from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate, useLocation } from 'react-router-dom';
import { ConfigProvider, App as AntdApp } from 'antd';
import LoginPage from './pages/Login/LoginPage';
import DashboardPage from './pages/Dashboard/DashboardPage';
import OrderStationPage from './pages/OrderStation/OrderStationPage';
import TablesPage from './pages/Tables/TablesPage';
import OrderDetailPage from './pages/Orders/OrderDetailPage';
import NewOrderPage from './pages/AddProductForOrder/OrderDetailPage';
import UsersPage from './pages/Users/UsersPage';
import UserDetailPage from './pages/Users/UserDetailPage';
import ProductsPage from './pages/Products/ProductsPage';
import ProductDetailPage from './pages/Products/ProductDetailPage';
import OrdersPage from './pages/Orders/OrdersPage';
import AppConfigPage from './pages/AppConfig/AppConfigPage';
import LabPage from './pages/Lab/LabPage';
import WineMenuGeneratorPage from './pages/Lab/WineMenuGenerator/WineMenuGeneratorPage';
import DataOverviewPage from './pages/DataOverview/DataOverviewPage';
import GlobalHeader from './components/common/Header';
import { antdTheme } from './styles/theme';
import './App.css';
import zhCN from 'antd/es/locale/zh_CN';

// Header包装器组件，只在非登录页显示
const HeaderWrapper: React.FC = () => {
  const location = useLocation();

  // 登录页不显示Header
  if (location.pathname === '/login') return null;

  // 其他所有页面显示统一的Header
  return <GlobalHeader />;
};

// 主应用内容，包含路由和Header
const AppContent: React.FC = () => {
  return (
    <>
      <HeaderWrapper />
      <Routes>
        <Route path="/" element={<Navigate to="/login" />} />
        <Route path="/login" element={<LoginPage />} />
      </Routes>
      <div className="main-content">
        <Routes>
          <Route path="/dashboard" element={<DashboardPage />} />
          <Route path="/order-station" element={<OrderStationPage />} />
          <Route path="/order-detail" element={<NewOrderPage />} />
          <Route path="/tables" element={<TablesPage />} />
          <Route path="/users" element={<UsersPage />} />
          <Route path="/users/:id" element={<UserDetailPage />} />
          <Route path="/products" element={<ProductsPage />} />
          <Route path="/products/:id" element={<ProductDetailPage />} />
          <Route path="/orders" element={<OrdersPage />} />
          <Route path="/orders/:id" element={<OrderDetailPage />} />
          <Route path="/lab" element={<LabPage />} />
          <Route path="/lab/wine-menu-generator" element={<WineMenuGeneratorPage />} />
          <Route path="/data-overview" element={<DataOverviewPage />} />
          <Route path="/app-config" element={<AppConfigPage />} />
        </Routes>
      </div>
    </>
  );
};

const App: React.FC = () => {
  return (
    <ConfigProvider theme={antdTheme} locale={zhCN}>
      <AntdApp>
        <div className="app-container">
          <Router>
            <AppContent />
          </Router>
        </div>
      </AntdApp>
    </ConfigProvider>
  );
};

export default App;